import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import  apis  from '@/apis'

// 响应式数据
const activeTab = ref<string>('account')
const showPhoneDialog = ref<boolean>(false)
const showPasswordDialog = ref<boolean>(false)
const userStore = useUserStore()

const userInfo = reactive({
  avatar: '',
  familyRole: userStore.userClanList[0].roleName,
  concilRole: userStore.userCouncilList[0].roleName,
  wechatBound: false,
  nickname:userStore.userInfo?.nickName,
  clanName:userStore.userClanList[0].name,
  concilName:userStore.userCouncilList[0].name,
})

const printfRes = async() => {
  const [res,err] = await apis.getUserInfo()
  console.log(res,err)
  console.log(userStore.userInfo )
  console.log(userStore.userClanList)
  console.log(userStore.userCouncilList )
}

// 绑定手机号
const phoneForm = reactive({
  phone: '',
  code: ''
})

//密码设置
const passwordForm = reactive({
  newPassword: '',
  confirmPassword: ''
})

// 方法
const handleAvatarUpload = () => {
  ElMessage.info('头像上传功能')
}

const sendVerificationCode = () => {
  ElMessage.info('验证码已发送')
}

const bindPhone = () => {
  if (phoneForm.phone && phoneForm.code) {
    showPhoneDialog.value = false
    ElMessage.success('手机号绑定成功')
  }
}

const bindWechat = () => {
  userInfo.wechatBound = true
  ElMessage.success('微信绑定成功')
}

const unbindWechat = () => {
  userInfo.wechatBound = false
  ElMessage.success('微信解绑成功')
}

const updatePassword = () => {
  if (passwordForm.newPassword === passwordForm.confirmPassword) {
    showPasswordDialog.value = false
    ElMessage.success('密码设置成功')
  } else {
    ElMessage.error('两次密码输入不一致')
  }
}



//导出
export function useAccount() {
  return {
    activeTab,
    showPhoneDialog,
    showPasswordDialog,
    userInfo,
    phoneForm,
    passwordForm,
    printfRes,
    handleAvatarUpload,
    sendVerificationCode,
    bindPhone,
    bindWechat,
    unbindWechat,
    updatePassword
  }
}
